<template>
    <div>
        <div :style="{ backgroundColor: background }" @click="handleClick" id="w-panel" class="w-color-panel-box">
            <div class="w-color-panel w-color-panel__white"></div>
            <div class="w-color-panel w-color-panel__black"></div>
            <div :style="{ top: cursorTop + 'px', left: cursorLeft + 'px' }" id="w-markerpoints"
                class="w-color-panel__cursor">
                <div></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'w-panel',
    props: {
        color: {
            required: true
        }
    },
    data() {
        return {
            isDragging: false,
            cursorTop: 0,
            cursorLeft: 0,
            background: 'hsl(0, 100%, 50%)',
            bg: 'hsl(0, 100%, 50%)'
        }
    },

    computed: {
        //获取色相值
        hueValue() {
            const hue = this.color.get('hue');
            return hue;
        }
    },

    watch: {
        hueValue(val) {
            this.updateView();
        }
    },
    mounted() {
        let that = this;
        let panel = document.querySelector('#w-panel');
        this.updateView()
        panel.addEventListener('mousedown', e => {
            if (that.isDragging) return; //防止重复
            console.log("按下")
            //防止触发到主页面的拖动事件（drag & drop）造成松开鼠标左键后，仍然可以随光标的移动而移动
            document.onselectstart = () => false;
            document.ondragstart = () => false;
            document.addEventListener('mousemove', that.moveFn);
            document.addEventListener('mouseup', that.upFn);
            that.isDragging = true;
        })
    },
    methods: {
        handleClick(event) {
            const thumb = document.querySelector('#w-markerpoints');
            const target = event.target;
            if (target !== thumb) {
                this.moveFn(event);
            }
        },

        moveFn(event) {
            console.log('移动')
            //色板位置信息
            let panel = document.querySelector('#w-panel').getBoundingClientRect();
            //标记点运动范围
            let left = event.clientX - panel.left;
            left = Math.min(left, panel.width);
            left = Math.max(0, left);
            this.cursorLeft = left;

            let top = event.clientY - panel.top;
            top = Math.min(top, panel.height);
            top = Math.max(0, top);
            this.cursorTop = top


            //横向移动控制饱和度 范围0-100
            //纵向移动控制亮度 范围0-100
            let saturation = left / panel.width * 100;
            let lightness = 100 - top / panel.height * 100;  //由于 .w-color-panel__blacks是从下向上的黑色渐变为透明色 因此要取相反的值
            //记录锚点位置代表的饱和度和明亮度
            this.color.set({
                saturation: saturation,
                value: lightness
            })
            // console.log(`hsv(${this.color.get('hue')}, ${Math.round(saturation)}%, ${Math.round(lightness)}%)`)
            // let hsl=this.hsv2hsl(this.color.get('hue'),saturation/100,lightness/100)
            // // debugger
            // this.bg=`hsl(${Math.round(hsl.h)},${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`;



        },
        // hsv2hsl(h, s, v) {
        //     const t = (2 - s) * v
        //     s = v === 0 || s === 0 ? 0 : (s * v) / (t > 1 ? 2 - t : t)
        //     return { h, s: s * 100, l: (t / 2) * 100 }
        // },

        upFn(event) {
            console.log('松开')
            document.removeEventListener('mousemove', this.moveFn);
            document.removeEventListener('mouseup', this.upFn);
            document.onselectstart = null;
            document.ondragstart = null;
            this.isDragging = false;
        },

        updateView() {
            this.$nextTick(() => {
                let panel = document.querySelector('#w-panel').getBoundingClientRect();
                //更新背景颜色
                this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';
                //根据记录的明亮度和饱和度逆推出描点位置
                let saturation = this.color.get('saturation');
                let lightness = this.color.get('value');
                this.cursorLeft = saturation * panel.width / 100;
                this.cursorTop = (100 - lightness) * panel.height / 100;
            })
        }

    },
}
</script>

<style  scoped>
.w-color-panel-box {
    position: relative;
    width: 280px;
    height: 180px;
}

.w-color-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.w-color-panel__white {
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.w-color-panel__black {
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.w-color-panel__cursor {
    position: absolute;
}

.w-color-panel__cursor>div {
    cursor: head;
    width: 4px;
    height: 4px;
    box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgb(0 0 0 / 30%), 0 0 1px 2px rgb(0 0 0 / 40%);
    border-radius: 50%;
    transform: translate(-2px, -2px);
    cursor: pointer;
}
</style>